<template>
    <div>
        <el-form :model="queryParams" ref="queryForm" :inline="true">
            <el-form-item label="菜单名称" prop="menuName">
                <el-input
                        v-model="queryParams.menuName"
                        placeholder="请输入菜单名称"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select v-model="queryParams.status" placeholder="菜单状态" clearable size="small">
                    <el-option
                            v-for="dict in statusOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                    />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                        type="primary"
                        plain
                        icon="el-icon-plus"
                       
                        @click="handleAddMenu"
                >新增
                </el-button>
            </el-col>
        </el-row>

        <!-- 查询结果 -->
        <el-table :data="menuList" row-key="menuId"
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
            <el-table-column prop="menuType" label="菜单类型" align="center"></el-table-column>
            <el-table-column prop="icon" label="图标" align="center" width="100">
                <template v-slot="scope">
                    {{scope.row.icon}}
                </template>
            </el-table-column>
            <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
            <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="status" label="状态" :formatter="statusFormat" width="80"></el-table-column>
            <el-table-column label="创建时间" align="center" prop="createTime"></el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template v-slot="scope">
                    <el-button
                               type="text"
                               icon="el-icon-edit"
                               @click="handleUpdateMenu(scope.row)"
                    >修改
                    </el-button>
                    <el-button
                           
                            type="text"
                            icon="el-icon-plus"
                            @click="handleAddMenu(scope.row)"
                    >新增
                    </el-button>
                    <el-button
                           
                            type="text"
                            icon="el-icon-delete"
                            @click="handleDeleteMenu(scope.row)"
                    >删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 新增或修改 -->
        <update-menu :title="title" :form="form" :open="open"
                     :menu-options="menuList"
                     v-on:dialogStatusChanged="changeDialogStatus($event)">
        </update-menu>
    </div>
</template>

<script>
    import {getMenuList, delMenu} from '/src/api/system/menu'
    import UpdateMenu from './update.vue'

    export default {
        name: "index",
        components: {
            UpdateMenu
        },
        data() {
            return {
                //弹出框状态
                open: false,
                // 状态数据字典
                statusOptions: [],
                // 显示状态数据字典
                visibleOptions: [],
                //查询参数
                queryParams: {},
                //查询结果
                menuList: [],
                //新增或修改
                title: '',
                // 表单参数
                form: {},
            }
        },
        created() {
            this.init()
        },
        methods: {
            //初始化
            init() {
                this.getDicts("sys_normal_disable").then(response => {
                    this.statusOptions = response.data;
                });
                this.getDicts("sys_show_hide").then(response => {
                    this.visibleOptions = response.data;
                });
                this.getMenuListByParam()
            },
            //查询菜单列表
            getMenuListByParam() {
                getMenuList(this.queryParams).then(response => {
                    this.menuList = response.data;
                });
            },
            handleQuery() {
                this.getMenuListByParam()
            },
            resetQuery() {
                this.resetForm('queryForm')
                this.getMenuListByParam()
            },
            //修改菜单
            handleUpdateMenu(row) {
                this.form = row
                const parentId = row.parentId
                //获取父级名称
                if (parentId === 0) {
                    this.form.parentName = '根目录'
                } else {
                    this.getParentMenuName(this.menuList, parentId)
                }
                this.title = "修改菜单信息"
                this.open = true
            },
            //添加菜单
            handleAddMenu(row) {
                this.form = {}
                if (row != null && row.menuId) {
                    this.form.parentId = row.menuId;
                    this.form.parentName = row.menuName
                } else {
                    this.form.parentId = 0;
                    this.form.parentName = ''
                }
                this.title = "新增菜单信息"
                this.open = true
            },
            //删除菜单
            handleDeleteMenu(row) {
                this.$confirm('是否确认删除名称为"' + row.menuName + '"的数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return delMenu(row.menuId);
                }).then(() => {
                    this.getMenuListByParam();
                    this.msgSuccess("删除成功");
                })
            },
            // 菜单状态字典翻译
            statusFormat(row, column) {
                if (row.menuType === "F") {
                    return "";
                }
                return this.selectDictLabel(this.statusOptions, row.status);
            },
            //更改弹出框的状态
            changeDialogStatus(status) {
                this.open = status
                this.getMenuListByParam()
            },
            //根据父级ID获取父级菜单名称
            getParentMenuName(menuList, parentId) {
                for (let i = 0; i < menuList.length; i++) {
                    const menuInfo = menuList[i]
                    if (menuInfo.menuId === parentId) {
                        this.form.parentName = menuInfo.menuName
                    }
                    if (menuInfo.hasChildren) {
                        this.getParentMenuName(menuInfo.children, parentId)
                    }
                }
            }
        },
    }
</script>

<style scoped>

</style>
